<template>
  <el-container>
    <el-header class="header">
      <Header />
    </el-header>
    <el-container>
      <el-aside width="200px">
        <navigator></navigator>
      </el-aside>
      <el-main style="padding-top:10px">
        <el-row>
          <!-- 公司列表 -->
          <el-col :span="20" :offset="2">
            <el-table :data="companyList" style="font-size: 20px">
              <el-table-column prop="address" label="账户地址"></el-table-column>
              <el-table-column prop="name" label="公司名称"></el-table-column>
              <el-table-column prop="creditAsset" label="账户总额"></el-table-column>
              <el-table-column label="查看详情">
                <template slot-scope="scope">
                  <el-button type="primary" @click="detail(scope.row.address)">查询</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="receiptType" label="转账">
                <template slot-scope="scope">
                  <el-button type="primary" @click="transfer(scope.row)">操作</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row>
          <!-- 展示公司详情信息 -->
          <el-dialog title="公司详情" :visible.sync="dialogVisible">
            <el-form label-width="100px" size="mini">
              <el-form-item label="账户地址:">
                {{ companyDetail.address }}
              </el-form-item>
              <el-form-item label="公司名称:">
                {{ companyDetail.name }}
              </el-form-item>
              <el-form-item label="账户总额:">
                {{ companyDetail.amount }}
              </el-form-item>
            </el-form>
            <!--  凭证列表展示 -->
            <el-tabs v-model="activeTab" type="card">
              <el-tab-pane label="发送凭证列表" name="1">
                <el-table :data="companyDetail.senderReceiptList" style="font-size: 15px">
                  <el-table-column prop="id" label="票据编号" min-width="10%"></el-table-column>
                  <el-table-column prop="senderAddress" label="发送人地址" min-width="30%"></el-table-column>
                  <el-table-column prop="accepterAddress" label="接收人地址" min-width="30%"></el-table-column>
                  <el-table-column prop="amount" label="交易量" min-width="10%"></el-table-column>
                  <el-table-column prop="receiptType" label="票据类型" min-width="10%"></el-table-column>
                  <el-table-column prop="transferType" label="票据交易类型" min-width="10%"></el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="接收凭证列表" name="2">
                <el-table :data="companyDetail.accepterReceiptList" style="font-size: 15px">
                  <el-table-column prop="id" label="票据编号"></el-table-column>
                  <el-table-column prop="senderAddress" label="发送人地址"></el-table-column>
                  <el-table-column prop="accepterAddress" label="接收人地址"></el-table-column>
                  <el-table-column prop="amount" label="交易量"></el-table-column>
                  <el-table-column prop="receiptType" label="票据类型"></el-table-column>
                  <el-table-column prop="transferType" label="票据交易类型"></el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-dialog>
        </el-row>
        <!--交易凭证页  -->
        <el-row class="el-row1">
          <el-dialog title="交易（发送凭证）页" :visible.sync="transDialogVisible" width="30%" class="content">
            <el-form label-width="100px" size="mini">
              <el-form-item label="发送账户地址:">
                {{ transDetail.senderAddress }}
              </el-form-item>
              <el-form-item label="接收账户地址:">
                {{ transDetail.accepterAddress }}
              </el-form-item>
              <el-form-item label="交易额:">
                <el-col :span="16" :offset="4">
                  <el-input type="primary" v-model="transDetail.amount"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="凭证类型:">
                <el-select v-model="transDetail.receiptType" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <el-row>
              <el-button type="primary" size="medium" @click="executeTransaction">确定</el-button>
            </el-row>
          </el-dialog>
        </el-row>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Navigator from "@/components/Navigator";
import Header from '@/components/Header';

export default {
  name: "Company",
  components: {
    Navigator,
    Header
  },
  data() {
    return {
      options: [{
        value: '1',
        label: '凭证'
      }, {
        value: '2',
        label: '现金'
      }],
      transDialogVisible: false,
      dialogVisible: false,
      companyList: [],
      receiptList: [],
      activeTab: '1',
      transDetail: {
        senderAddress: '',
        accepterAddress: '',
        amount: '',
        receiptType: '1'
      },
      companyDetail: {
        address: '',
        name: '',
        amount: '',
        senderReceiptList: [],
        accepterReceiptList: []
      }
    }
  },
  methods: {
    goback() {
      this.$router.push('/home')
    },
    // 获取公司详情信息
    detail(queryAddress) {
      this.dialogVisible = true
      let address = this.$cookies.get('address')
      this.$axios.get(`/finance/query/getCompanyEntity?address=${address}&queryAddress=${queryAddress}`)
        .then((response) => {
          console.log(response)
          if (response.code == 200) {
            let { address, name, creditAsset } = response.data.userVO
            this.companyDetail = {
              address, name, creditAsset,
              senderReceiptList: response.data.senderReceiptList,
              accepterReceiptList: response.data.accepterReceiptList
            }
          }
        })
    },
    transfer(row) {
      this.transDialogVisible = true
      this.transDetail.senderAddress = row.address;
      this.transDetail.accepterAddress = this.$cookies.get('address')
    },
    executeTransaction() {
      let funcName = "companyToCompanyReceipt";
      if (this.transDetail.amount == '') {
        this.$message.warning("交易额不能为空！")
        return
      }
      //操作账户是银行，银行转账给公司，发送凭证给银行
      if (this.$cookies.get('orgType') == 2) {
        funcName = "bankToCompanyReceipt"
      }
      if (this.transDetail.accepterAddress == this.transDetail.senderAddress) {
        this.$message.warning("凭证发送账户和接收账户不能相一致！")
        return
      }
      this.$axios.post(`/finance/transaction/${funcName}`, this.transDetail).then((response) => {
        if (response.code == 200) {
          this.query()
          this.transDialogVisible = false
        }
      })
    },
    query() {
      let address = this.$cookies.get('address')
      this.$axios.get("/finance/query/listCompany?address=" + address).then((response) => {
        if (response.code == 200) {
          this.companyList = response.data
        }
      })
    },
  },
  mounted() {
    this.query()
  }
}
</script>

<style>
.header {
  background-color: #409EFF;
  color: #fff;
  line-height: 20px;
}

.content {
  font-size: 18px !important
}
</style>